Action Types এবং Action Objects Redux-এর দুটি গুরুত্বপূর্ণ উপাদান। এগুলি একসাথে স্টেট পরিবর্তন করার জন্য ব্যবহার হয়। Action Type একশনের ধরন বা শ্রেণী নির্দেশ করে, এবং Action Object হল সেই তথ্য যা অ্যাকশনটি রিডিউসারে পাঠানোর জন্য প্রস্তুত থাকে।
Action Types কী?
Action Type হল একটি স্ট্রিং যা অ্যাকশনের ধরন বা কার্যকলাপ নির্ধারণ করে। এটি একশনের প্রধান চিহ্নিতকারী। type ফিল্ডটি প্রতিটি একশন অবজেক্টের মধ্যে থাকে এবং রিডিউসারে এই type অনুযায়ী স্টেট পরিবর্তন করার লজিক পরিচালিত হয়।
Action Types সাধারণত কনস্ট্যান্টস হিসেবে ডিফাইন করা হয়, যাতে টাইপিং এর ভুল কমানো যায় এবং কোড আরও পরিষ্কার এবং রিডেবেল হয়। সাধারণভাবে, একটি অ্যাকশন টাইপ শুধুমাত্র অ্যাকশন এর উদ্দেশ্য নির্দেশ করে (যেমন "ADD_TODO", "REMOVE_ITEM" ইত্যাদি), যাতে রিডিউসারে সহজে ম্যাচ করা যায়।
Action Types এর উদাহরণ:
// actionTypes.js
export const ADD_TODO = 'ADD_TODO';
export const REMOVE_TODO = 'REMOVE_TODO';
export const TOGGLE_TODO = 'TOGGLE_TODO';
এখানে, আমরা তিনটি অ্যাকশন টাইপ ডিফাইন করেছি:
- ADD_TODO: টুডু আইটেম যোগ করার জন্য।
- REMOVE_TODO: টুডু আইটেম মুছে ফেলার জন্য।
- TOGGLE_TODO: টুডু আইটেমের স্ট্যাটাস পরিবর্তন করার জন্য।
এই কনস্ট্যান্টগুলির মাধ্যমে, আমরা কোডে টাইপিংয়ের ভুল কমাতে পারি এবং অ্যাকশনের উদ্দেশ্য আরো পরিষ্কারভাবে বুঝতে পারি।
Action Object কী?
Action Object হল একটি জাভাস্ক্রিপ্ট অবজেক্ট যা type এবং অন্য প্রয়োজনীয় তথ্য ধারণ করে। একশন অবজেক্টটি যখন store.dispatch() দ্বারা স্টোরে পাঠানো হয়, তখন রিডিউসার সেই অবজেক্ট ব্যবহার করে স্টেট পরিবর্তন করে।
একটি অ্যাকশন অবজেক্টের দুটি প্রধান অংশ:
- type: একশনের ধরন বা শ্রেণী (যেমন "ADD_TODO", "REMOVE_TODO")।
- payload: (অপশনাল) অতিরিক্ত ডেটা যা একশনটির জন্য প্রয়োজন। এটি স্টেট পরিবর্তনের জন্য প্রয়োজনীয় তথ্য হতে পারে (যেমন, টুডু আইটেমের টেক্সট বা আইডি)।
Action Object এর উদাহরণ:
// Action Object
const addTodoAction = {
type: 'ADD_TODO',
payload: {
id: 1,
text: 'Learn Redux'
}
};
এখানে:
- type:
'ADD_TODO'— এটি রিডিউসারকে জানায় যে, টুডু আইটেম যোগ করতে হবে। - payload:
{ id: 1, text: 'Learn Redux' }— এটি টুডু আইটেমের তথ্য, যা রিডিউসারে প্রক্রিয়াকৃত হবে।
Action Object এর অন্য উদাহরণ:
const removeTodoAction = {
type: 'REMOVE_TODO',
payload: {
id: 1
}
};
এখানে:
- type:
'REMOVE_TODO'— এটি রিডিউসারকে জানায় যে, একটি টুডু আইটেম মুছে ফেলতে হবে। - payload:
{ id: 1 }— এটি মুছে ফেলা টুডু আইটেমের আইডি।
Action Types এবং Action Objects এর মধ্যে সম্পর্ক
Action Types এবং Action Objects একে অপরের সাথে গভীরভাবে সম্পর্কিত। একশন টাইপ হল অ্যাকশনের ধরন বা শ্রেণী, যা রিডিউসারকে নির্দেশ দেয় কী ধরনের পরিবর্তন করতে হবে। এবং অ্যাকশন অবজেক্ট হল সেই ডেটা বা তথ্য, যা রিডিউসারকে স্টেট পরিবর্তন করতে সাহায্য করে।
উদাহরণ:
// Action Type
const ADD_TODO = 'ADD_TODO';
// Action Object
const addTodoAction = {
type: ADD_TODO,
payload: {
id: 1,
text: 'Learn Redux'
}
};
এখানে, ADD_TODO হল একশন টাইপ এবং এটি addTodoAction অ্যাকশন অবজেক্টে ব্যবহার করা হয়েছে। যখন আমরা এই অ্যাকশনটি ডিসপ্যাচ করি, রিডিউসার সেই type এর ভিত্তিতে স্টেট আপডেট করবে।
Action Types ব্যবহারের সুবিধা
- ভুল টাইপিং কমানো: একশন টাইপগুলো কনস্ট্যান্ট হিসেবে ডিফাইন করলে টাইপিংয়ের ভুল এড়ানো যায় এবং কোড আরও রিডেবেল হয়।
- সেন্ট্রালাইজড টাইপ ডিফিনিশন: অ্যাকশন টাইপগুলো সাধারণত একটি আলাদা ফাইল বা মডিউলে রাখা হয়, যাতে এটি সহজেই অ্যাক্সেস করা যায় এবং প্রয়োজনীয় পরিবর্তন করা যায়।
- স্টেট পরিবর্তনের সুসংগঠিত নির্দেশনা: অ্যাকশন টাইপগুলি অ্যাকশন অবজেক্টের মাধ্যমে রিডিউসারকে সুনির্দিষ্টভাবে জানান দেয়, যাতে স্টেট পরিবর্তন পরিচালনা করা সহজ হয়।
Action Types এবং Action Objects এর সাথে Redux ডেটা ফ্লো
Redux-এ ডেটা ফ্লো একমুখী থাকে। এটি নিশ্চিত করে যে, একমাত্র একশন ডিসপ্যাচ করার মাধ্যমে স্টেট পরিবর্তন হবে এবং অ্যাপ্লিকেশনটির অবস্থান পূর্বানুমানযোগ্য এবং ডিবাগযোগ্য থাকবে।
- Action Type: প্রথমে একটি অ্যাকশন টাইপ তৈরি করা হয় (যেমন
'ADD_TODO')। - Action Object: তারপরে, অ্যাকশন অবজেক্ট তৈরি করা হয়, যা ঐ টাইপের সাথে অতিরিক্ত ডেটা (যেমন টুডু আইটেমের তথ্য) ধারণ করে।
- Dispatch Action: অ্যাকশন অবজেক্টটি স্টোরে
dispatch()করা হয়, যা রিডিউসারকে স্টেট পরিবর্তনের নির্দেশ দেয়। - Reducer: রিডিউসার এই অ্যাকশন অবজেক্টটি গ্রহণ করে এবং তার ভিত্তিতে নতুন স্টেট তৈরি করে।
- Store: নতুন স্টেট স্টোরে সঞ্চিত হয়, এবং UI আপডেট হয়।
সারাংশ
Action Types হল স্ট্রিং যা একশনের ধরন নির্দেশ করে, এবং Action Objects হল সেই অবজেক্ট যা একশনটি সম্পাদন করতে প্রয়োজনীয় তথ্য ধারণ করে। Redux-এ Action Types কনস্ট্যান্ট হিসেবে ডিফাইন করা হয়, যাতে টাইপিংয়ের ভুল কমানো যায় এবং কোড পরিষ্কার থাকে। Action Objects স্টোরে পাঠানোর মাধ্যমে রিডিউসারকে জানায় কী ধরনের স্টেট পরিবর্তন করতে হবে। Action Types এবং Action Objects একসাথে কাজ করে অ্যাপ্লিকেশনের স্টেট পরিবর্তন সহজ, সুসংগঠিত এবং পূর্বানুমানযোগ্য করে তোলে।
